
<script type="text/html" template>
    <link rel="stylesheet" href="{{ layui.setter.base }}style/alert.css">
    <link rel="stylesheet" href="{{ layui.setter.base }}style/dtree.css">
</script>
<style scoped>
.layui-form-label{
  width: 100px;
}
.layui-input-inline input{
  width: 250px;
}
.layui-layer-admin i[close]{
    color: #666;
}
</style>
<div class="layui-fluid" style="background-color: white;">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="layuiadmin-app-forum-reply">
            <div class="layui-inline">
                <button class="layui-btn layuiadmin-btn-tags" data-type="add">添加根菜单</button>
            </div>
        </div>
    </div>
    <div class="layui-card-body">
        <div id="test1"></div>
    </div>
</div>
<script>
    layui.use(['admin', 'form', 'user', 'api', "element", 'tree', 'laytpl','dtree'], function () {
        var $ = layui.$,
            admin = layui.admin,
            view = layui.view,
            api = layui.api,
            table = layui.table,
            setter = layui.setter,
            utill = layui.utill,
            element = layui.element,
            laytpl = layui.laytpl,
            tree = layui.tree,
            dtree = layui.dtree,
            router = layui.router(),
            form = layui.form;

        rander()
        function rander() {
            admin.req({
                url: api.host + api.getMenu,
                done: function (res) {
                    for (let index = 0; index < res.data.length; index++) {
                        res.data[index].spread = true
                        res.data[index].title = res.data[index].tcName
                        res.data[index].children = res.data[index].child
                        if (res.data[index].child.length > 0) {
                            for (let k = 0; k < res.data[index].child.length; k++) {
                                res.data[index].child[k].title = res.data[index].child[k].tcName
                            }
                        }
                    }
                   
                    var inst1 = tree.render({
                        elem: '#test1' //绑定元素
                        ,
                        data: res.data,
                        id: "tree",
                        accordion: true,
                        click: function (obj) {
                            layer.alert(obj.data.tcMenuId)
                        },
                        onlyIconControl: true,
                        edit: ['add', 'del'],
                        operate: function (obj) {
                            rander()
                            var type = obj.type; //得到操作类型：add、edit、del
                            var data = obj.data; //得到当前节点的数据
                            //Ajax 操作
                            var id = data.id; //得到节点索引

                            if (type === 'add') { //增加节点   
                                admin.popup({
                                    title: '添加菜单',
                                    area: ['550px', '450px'],
                                    id: 'LAY-popup-content-add',
                                    shadeClose: false,
                                    closeBtn: 0,
                                    success: function (layero, index) {
                                        view(this.id).render(
                                            'moneyManage/menuFrom')
                                            .done(function () {
                                                form.render(null,
                                                    'layuiadmin-app-form-list'
                                                );
                                                //监听提交
                                                form.on('submit(layuiadmin-app-form-submit)',
                                                    function (
                                                        data) {
                                                        var field =
                                                            data
                                                                .field; //获取提交的字段

                                                        field
                                                            .tcParentId =
                                                            obj.data
                                                                .tcMenuId
                                                        admin.req({
                                                            url: api
                                                                .host +
                                                                api
                                                                    .insertMenu,
                                                            data: JSON
                                                                .stringify(
                                                                    field
                                                                ),
                                                            contentType: 'application/json',
                                                            dataType: 'json',
                                                            type: "POST",
                                                            done: function (
                                                                res
                                                            ) {
                                                                rander
                                                                    ()

                                                                layer
                                                                    .close(
                                                                        index
                                                                    ); //执行关闭 
                                                            }
                                                        });

                                                    });
                                            });
                                    }
                                });
                            } else if (type === 'del') { //删除节点
                                var datas = [{
                                    tcMenuId: obj.data.tcMenuId,
                                    tcState: 1
                                }]
                                admin.req({
                                    url: api.host + api.deleteMenu,
                                    data: JSON.stringify(datas),
                                    dataType: 'json',
                                    contentType: 'application/json',
                                    type: "POST",
                                    done: function (res) {
                                        rander()
                                    }
                                });
                            };
                        }
                    });


                }
            });
        }


        var active = {
            add: function () {
                admin.popup({
                    title: '添加菜单',
                    area: ['550px', '500px'],
                    id: 'LAY-popup-content-add',
                    success: function (layero, index) {
                        view(this.id).render('moneyManage/menuFrom').done(function () {
                            form.render(null, 'layuiadmin-app-form-list');
                            //监听提交
                            form.on('submit(layuiadmin-app-form-submit)', function (
                                data) {
                                var field = data.field; //获取提交的字段
                                admin.req({
                                    url: api.host + api.insertMenu,
                                    data: JSON.stringify(field),
                                    dataType: 'json',
                                    contentType: 'application/json',
                                    type: "POST",
                                    done: function (res) {
                                        rander(field.userType)
                                        layer.close(
                                            index); //执行关闭 
                                    }
                                });

                            });
                        });
                    }
                });
            }
        }
        $('.layui-btn.layuiadmin-btn-tags').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    });
</script>